<div class="p-4 min-w-[26rem] min-h-[30rem] flex flex-col">

  <div class="flex flex-col flex-grow">

    @for (shelf of (shelfState$ | async)?.shelves; track shelf) {
      <div>
        <div class="flex flex-row items-center gap-4 py-2">
          <p-checkbox [inputId]="shelf.name" name="group" [value]="shelf" [(ngModel)]="selectedShelves"></p-checkbox>
          <label [for]="shelf.id">{{ shelf.name }}</label>
        </div>
      </div>
    }

    <div class="flex justify-between items-center pt-4 mt-auto">
      <p-button outlined="true" label="Create Shelf" (onClick)="createShelfDialog()"></p-button>
      <div class="flex gap-4">
        <p-button severity="secondary" label="Cancel" (onClick)="closeDialog()"></p-button>
        <p-button label="Save" (onClick)="updateBooksShelves()"></p-button>
      </div>
    </div>
  </div>

  <p-dialog [style]="{ width: '26rem', height: '30rem' }"  [(visible)]="displayShelfDialog" header="Create Shelf" [modal]="true" [draggable]="false" [closable]="true" (onHide)="closeShelfDialog()">
    <div class="py-2">
      <label for="shelfName">Shelf Name</label>
      <input id="shelfName" type="text" pInputText [(ngModel)]="shelfName" class="w-full"/>
    </div>
    <div class="py-4">
      <label>Shelf Icon</label>
      @if (!selectedIcon) {
        <div>
          <p-button label="Select Icon" icon="pi pi-search" (onClick)="openIconPicker()"></p-button>
        </div>
      }
      @if (selectedIcon) {
        <div class="flex items-center gap-4">
          <i [class]="selectedIcon"></i>
          <p-button icon="pi pi-times" text="true" outlined="true" severity="warn" (onClick)="clearSelectedIcon()"></p-button>
        </div>
      }
    </div>
    <ng-template pTemplate="footer">
      <p-button label="Cancel" severity="secondary" (onClick)="closeShelfDialog()" class="p-button-text"></p-button>
      <p-button label="Save" (onClick)="saveNewShelf()"></p-button>
    </ng-template>
  </p-dialog>
</div>
